<script setup lang="ts">
import type { MenuTreeResult } from "@/api/types";
import IconifyIcon from "@/components/ReIcon/src/iconifyIcon";
import { $t } from "@/plugins/i18n";
import { fmtTableData } from "@/utils/tools";
import FormDialog from "./components/FormDialog.vue";
import { useMenuFilter, useMenuFormDialog, useMenuOptions, useMenuTable } from "./composables";

defineOptions({
    name: "SysMenus",
});

const { menuTypeOptions } = useMenuOptions();
const { tableLoading, tableData, fetchTableData, handleRecordDelete } = useMenuTable();
const {
    dialogVisible,
    editData,
    parentId,
    openAddDialog,
    openEditDialog,
} = useMenuFormDialog();
const { searchQuery, filteredData } = useMenuFilter(tableData);
</script>

<template>
    <el-card>
        <el-form :inline="true" @submit.prevent>
            <el-form-item>
                <el-input
                    v-model="searchQuery"
                    class="w-70!"
                    clearable
                    :placeholder="$t('placeholder.searchByMenuNameOrPath')"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="openAddDialog(null)">
                    {{ $t("button.add") }}
                </el-button>
            </el-form-item>
        </el-form>

        <el-page-table
            :loading="tableLoading"
            :data="filteredData"
            :page="false"
            :fetch-data="fetchTableData"
            :show-overflow-tooltip="true"
            row-key="id"
        >
            <el-table-column prop="meta.title" :label="$t('label.name')">
                <template #default="{ row }">
                    <IconifyIcon v-if="row.meta?.icon" class="inline-block align-[-2px] mr-1" :icon="row.meta?.icon" />
                    <span>{{ $t(row.meta?.title) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="path" :label="$t('label.routePath')" :formatter="({ path }) => fmtTableData().text(path)" />
            <el-table-column prop="component" :label="$t('label.componentPath')" :formatter="({ component }) => fmtTableData().text(component)" />
            <el-table-column prop="redirect" :label="$t('label.redirection')" :formatter="({ redirect }) => fmtTableData().text(redirect)" />
            <el-table-column prop="meta.rank" :label="$t('label.menuRank')">
                <template #default="{ row }">
                    {{ row.meta?.rank ?? '/' }}
                </template>
            </el-table-column>
            <el-table-column prop="meta.menuType" :label="$t('label.menuType')">
                <template #default="{ row }">
                    <el-tag
                        :type="menuTypeOptions.find(i => i.value === row.meta?.menuType)!.type as any"
                        effect="plain"
                        disable-transitions
                    >
                        {{ menuTypeOptions.find(i => i.value === row.meta?.menuType)!.label }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="meta.showLink" :label="$t('label.showMenu')">
                <template #default="{ row }">
                    <el-tag v-if="row.meta?.showLink === false" type="danger" disable-transitions>
                        {{ $t("status.no") }}
                    </el-tag>
                    <el-tag v-else type="success" disable-transitions>
                        {{ $t("status.yes") }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="operation" :label="$t('label.operation')" width="200">
                <template #default="{ row }:{row:MenuTreeResult}">
                    <el-button v-if="row.meta?.menuType !== 'button'" type="primary" link @click="openAddDialog(row.id)">
                        {{ $t("button.add") }}
                    </el-button>
                    <el-button type="primary" link @click="openEditDialog(row)">
                        {{ $t("button.edit") }}
                    </el-button>
                    <el-delete-button is-box :tip="$t('description.deleteMenuConfirm')" @confirm="handleRecordDelete(row.id, row.meta?.menuType)" />
                </template>
            </el-table-column>
        </el-page-table>

        <FormDialog
            v-model:visible="dialogVisible"
            :edit-data="editData"
            :parent-id="parentId"
            @success="fetchTableData"
        />
    </el-card>
</template>
